<template>
	<el-pagination
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		@prev-click="handlePrevClick"
		@next-click="handleNextClick"
		:current-page="currentPage"
		popper-class="页"
		:page-sizes="pageSizes"
		:page-size="pageSize"
		layout="total, sizes, prev, pager, next, jumper"
		:total="total"
	>
	</el-pagination>
</template>

<script lang="ts">
export default {
	props: {
		total: {
			type: Number,
			default: 0,
		},
		pageSize: {
			type: Number,
			default: 10,
		},
		pageSizes: {
			type: Array,
			default: [10, 30, 50, 100, 200],
		},
		currentPage: {
			type: Number,
			default: 3,
		},
	},
	setup(props: any, ctx: any) {
		const handleSizeChange = (val: number) => {
			ctx.emit("handleSizeChange", val);
		};
		const handleCurrentChange = (val: number) => {
			ctx.emit("handleCurrentChange", val);
		};
		const handlePrevClick = (val:number) => {
			ctx.emit("handlePrevClick", val);
		};
		const handleNextClick = (val:number) => {
			ctx.emit("handleNextClick", val);
		};
		return {
			handleSizeChange,
			handleCurrentChange,
			handlePrevClick,
			handleNextClick,
		};
	},
};
</script>

<style></style>
